<template>
  <div ref="canvas" class="RenderArea"></div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

export default {
  mounted() {
    const canvas = this.$refs.canvas;

    // 设置场景
    var scene = new THREE.Scene();

    // 设置相机
    var camera = new THREE.PerspectiveCamera(
      50,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    // 设置渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xeeeeee));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true; // 打开阴影

    // 添加 OrbitControls
    var controls = new OrbitControls(camera, renderer.domElement);
    controls.update();

    // 添加 FBXLoader
    var loader = new FBXLoader();

    // 加载 FBX 模型
    loader.load(
      'static/千斤顶.fbx',
      function (object) {
        scene.add(object);
      },
      undefined,
      function (error) {
        console.error(error);
      }
    );

    canvas.appendChild(renderer.domElement);

    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
      controls.update();
    }

    render();
  },
};
</script>

<style>
/* 设置 Three.js 的渲染画布为页面宽高 */
.RenderArea {
  width: 100%;
  height: 100%;
}
</style>
